/* 首页 */
.home_menu {
    width: 100%;
    height: 200rpx;
}

.home_menu_content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin: 40rpx 30rpx;
    width: calc(100% - 60rpx);
    height: calc(100% - 80rpx);
}

.home_menu_item {
    display: flex;
    flex-direction: column;
    width: 25%;
    height: 120rpx;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 40rpx;
}

.indicator {
    display: flex;
    justify-content: center;
}

.indicator__dot {
    height: 4rpx;
    width: 20rpx;
    border-radius: 4rpx;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 6rpx;
    transition: background-color 0.3s;
}

.indicator__dot--active {
    background-color: #ffffff;
}

/* 导航 */
.status_bar {
    height: 20px;
    width: 100%;
}

.search_nav_content {
    position: fixed;
    width: 100%;
    z-index: 998;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.search_title {
    width: 180rpx;
    left: calc(50% - 90rpx);
    position: absolute;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #000000;
    font-size: 30rpx;
    font-weight: 500;
}

.search_placeholder_view {
    height: 290rpx;
}

/* 间隔槽 */
.gap {
    height: 16rpx;
    width: 92%;
    margin: 0 auto;
    background-color: #f2f2f2;
}

/* 搜索 */
.search-main {
    width: 690rpx;
    margin: -180rpx auto;
}

.search-item {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    border-bottom: 1px solid #f6f6f6;
    padding: 30rpx 0;
}

.search-item1 {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 44rpx;
    padding: 30rpx 0;
    justify-content: space-between;
    border-bottom: 1px solid #f6f6f6;
    padding-bottom: 44rpx;
}

.search-left {
    display: flex;
    align-items: center;
}

.search-item .search-avatar {
    margin-right: 20rpx;
}

.search-right {
    margin-left: 26rpx;
    font-size: 28rpx;
    color: #333;
    line-height: 40rpx;
    font-weight: 500;
}

.search-title {
    font-size: 28rpx;
    margin-bottom: 6rpx;
    font-weight: 500;
    color: #333;
}

.search-title1 {
    font-size: 28rpx;
    margin-bottom: 6rpx;
    font-weight: 500;
    color: #333;
    margin-left: 20rpx;
}

.search-right .search-bifo {
    font-size: 24rpx;
    color: #999;
}

.search-right1 image {
    width: 16rpx;
    height: 16rpx;
    margin-right: 4rpx;
}

.search-right1 {
    border: 1px solid #ff822e;
    color: #ff822e;
    border-radius: 54rpx;
    width: 112rpx;
    box-sizing: border-box;
    padding: 8rpx 0;
    font-size: 24rpx;
    text-align: center;
}

.search-right2 {
    border: 1px solid #999;
    color: #999;
    border-radius: 54rpx;
    width: 112rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    text-align: center;
    padding: 8rpx 0;
}

.search-article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.search-article .article-left {
    display: flex;
    align-items: center;
    width: 70%;
}

.search-article .article-title1 {
    font-size: 28rpx;
    margin-left: 20rpx;
    width: 90%;
}

.search-article .article-title1 view:first-child {
    color: #333333;
    line-height: 40rpx;
    font-size: 28rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 80%;
}

.search-article .article-title1 view:last-child {
    color: #999;
    line-height: 40rpx;
    font-size: 22rpx;
}

.search-article .article-title1 view:last-child text {
    color: #ccc;
    font-size: 20rpx;
    margin-left: 10rpx;
}

.articleTitle {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
    width: 100%;
    margin: 20rpx auto 0;
}

.articleContent {
    width: 100%;
    margin: 0 auto;
    font-size: 28rpx;
    color: #999;
    line-height: 40rpx;
    margin-top: 10rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.search-main .article-main {
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid #f1f1f1;
    padding: 30rpx 0;
}

.articleImg {
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    margin: 20rpx auto;
}

.articleImg image {
    width: 222rpx;
    height: 222rpx;
    margin-right: 12rpx;
    background-color: #eaeaea;
    border-radius: 24rpx;
}

.articleImg image:nth-child(3n) {
    margin-right: 0;
}

.articleBottom {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0 auto;
}

.articleBottom .article-message {
    margin-left: 56rpx;
    position: relative;
    width: 66rpx;
}

.articleBottom image {
    width: 56rpx;
    height: 56rpx;
}

.articleBottom text {
    position: absolute;
    bottom: 2rpx;
    right: 0rpx;
    font-size: 20rpx;
    color: #333;
}

/* 知识文章 */
.article-item {
    width: 92%;
    background-color: #fff;
    display: flex;
    border-radius: 12rpx;
    margin: 20rpx auto;
    padding: 20rpx;
    box-sizing: border-box;
}

.article-item .article-left {
    width: 256rpx;
    height: 180rpx;
}

.article-item .article-right {
    padding-left: 20rpx;
    width: calc(100% - 300rpx);
    font-size: 32rpx;
    letter-spacing: 0.27px;
    line-height: 44rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 80rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.empty {
    position: fixed;
    top: calc(50% - 120rpx);
    left: calc(50% - 158rpx);
    z-index: 100;
}

.empty image {
    width: 316rpx;
    height: 316rpx;
}

.empty text {
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-top: 20rpx;
}

.redblack-empty {
    width: 50%;
    text-align: center;
    margin: 0 auto;
}

.redblack-empty image {
    width: 316rpx;
    height: 316rpx;
}

.redblack-empty text {
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    display: block;
    margin-top: 20rpx;
}

/* 形体测试 */
.physique-title {
    width: 92%;
    margin: 20rpx auto 0;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666;
}

.physique-subtitle {
    width: 92%;
    margin: 0 auto;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #999;
    margin-top: 12rpx;
}

.physique-main {
    width: 100%;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0rpx;
    margin-top: 30rpx;
    padding: 30rpx 0;
    height: calc(100% - 150rpx);
}

.physique-main .physique-title1 {
    font-size: 28rpx;
    margin: 30rpx 0 0rpx;
    padding-left: 30rpx;
    position: relative;
    font-weight: 500;
    color: #333;
}

.physique-main .physique-title1 text {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #009977;
    border-radius: 0px 98px 98px 0px;
}

.physique-type,
.physique-type1 {
    display: flex;
    width: 92%;
    margin: 0 auto;
    align-items: center;
    margin-top: 30rpx;
    flex-wrap: wrap;
}

.physique-type view {
    padding: 16rpx 26rpx;
    margin: 0 30rpx 30rpx 0;
    font-size: 28rpx;
    border: 1px solid #f4f4f4;
    border-radius: 40rpx;
    background-color: #f4f4f4;
}

/* .physique-type view:nth-child(2n){margin-right: 0;} */
.physique-type view.on {
    border: 1px solid #009977;
    color: #009977;
    background-color: rgba(0, 153, 119, 0.06);
}

.physique-type1 view {
    padding: 16rpx 32rpx;
    margin: 0 30rpx 30rpx 0;
    font-size: 28rpx;
    border: 1px solid #f4f4f4;
    border-radius: 40rpx;
    background-color: #f4f4f4;
}

/* .physique-type1 view:nth-child(2n){margin-right: 0;} */
.physique-type1 view.on {
    border: 1px solid #009977;
    color: #009977;
    background-color: rgba(0, 153, 119, 0.06);
}

.footer {
    width: 100%;
    margin: 0 auto;
    font-size: 30rpx;
    left: 0;
    position: fixed;
    padding: 20rpx 0 20rpx;
    bottom: env(safe-area-inset-bottom);
    text-align: center;
    line-height: 96rpx;
    color: #fff;
    box-sizing: border-box;
}

.footer-item {
    width: 92%;
    color: #fff;
    font-size: 30rpx;
    height: 96rpx;
    line-height: 96rpx;
    box-shadow: 0px 24rpx 48rpx 0px rgba(55, 168, 148, 0.2);
    background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
    border-radius: 24rpx;
    margin: 0 auto;
}

.result-main {
    width: 100%;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0rpx;
    margin-top: -34px;
    padding: 40rpx 0;
    height: calc(100% - 574rpx);
}

.result-main .result-title {
    font-size: 28rpx;
    margin: 0rpx 0 0rpx;
    padding-left: 30rpx;
    position: relative;
    font-weight: 500;
    color: #333;
}

.result-main .result-title text {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #009977;
    border-radius: 0px 98px 98px 0px;
}

.result-main .result-content {
    width: 92%;
    margin: 40rpx auto;
    font-size: 28rpx;
    letter-spacing: 0.23px;
    color: #666;
    line-height: 48rpx;
}

/* 推荐食谱 */
.cook-item {
    width: 100%;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 24rpx;
    margin: 20rpx 0;
}

.cook-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #333;
}

.cook-top view:first-child {
    display: flex;
    align-items: center;
    font-weight: 500;
}

.cook-top view:last-child {
    font-weight: 500;
    line-height: 40rpx;
}

.cook-top image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
}

.cook-cntent {
    font-size: 28rpx;
    line-height: 40rpx;
    margin-top: 30rpx;
}

.cook-cntent1 {
    font-size: 24rpx;
    line-height: 36rpx;
    margin-top: 10rpx;
    color: #999;
}

.cook-main,
.redblack-main {
    background-color: #fff;
    width: 100%;
    border-radius: 24rpx;
    padding: 30rpx 0;
}

.cook-type {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
}

.cook-type view {
    background-color: #f6f6f6;
    color: #999;
    width: 156rpx;
    height: 56rpx;
    margin-right: 20rpx;
    text-align: center;
    line-height: 56rpx;
    border-radius: 28rpx;
}

.cook-type view.on {
    background-color: rgba(0, 153, 119, 0.06) !important;
    color: #009977 !important;
}

.cook-type view:last-child {
    margin-right: 0;
}

.cook-birf {
    font-size: 28rpx;
    line-height: 44rpx;
    letter-spacing: 0.23px;
    width: 92%;
    margin: 20rpx auto 30rpx;
}

.cook-typetitle {
    min-width: 136rpx !important;
}

.cookType {
    width: 92%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.cookType .cook_item {
    width: 25%;
    text-align: center;
    margin-bottom: 30rpx;
}

.cookType .cook_item label {
    color: #333333;
    font-size: 24rpx;
    font-weight: 500;
    display: block;
    margin-top: 10rpx;
}

/* 红黑榜 */
/* width: 176rpx */
.redblack-type {
    width: 92%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    font-size: 28rpx;
}

.redblack-type view:first-child {
    margin-left: 10rpx;
}

.redblack-type view {
    background-color: #f6f6f6;
    color: #999;
    padding: 0 20rpx;
    width: 176rpx;
    box-sizing: border-box;
    height: 56rpx;
    margin-right: 20rpx;
    text-align: center;
    line-height: 56rpx;
    border-radius: 28rpx;
}

.redblack-type view.on {
    background-color: rgba(0, 153, 119, 0.06) !important;
    color: #009977 !important;
}

.redbloack-item {
    display: flex;
    align-items: center;
    width: 92%;
    margin: 0 auto;
    padding: 40rpx 0 30rpx;
    border-bottom: 1px solid #f1f1f1;
}

.redbloack-item image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
    border-radius: 8rpx;
}

.redblack-right {
    width: calc(100% - 80rpx);
}

.redblack-right .right-title {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
}

.redblack-right .right-bifo {
    color: #999;
    line-height: 34rpx;
    margin-top: 6rpx;
    font-size: 24rpx;
}

.redblack-right .right-bifo text {
    margin: 0 10rpx;
}

.redblack-right .right-tag text {
    display: inline-block;
    margin: 10rpx 0 20rpx;
    background-color: rgba(255, 130, 46, 0.06);
    color: #ff822e;
    font-size: 24rpx;
    line-height: 36rpx;
    padding: 2rpx 12rpx;
}

.redbloack-item:last-child {
    border-bottom: none !important;
}

/* 食品详情 */
.food-detail {
    width: 100%;
}

.Nutrition {
    width: 100%;
    background-color: #fff;
    border-radius: 24rpx;
    margin: 20rpx 0;
    padding-bottom: 30rpx;
}

.Nutrition-top {
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Nutrition-top image {
    width: 20rpx;
    height: 20rpx;
    margin-left: 4rpx;
}

.Nutrition-top view:first-child {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
}

.Nutrition-top view:first-child text {
    color: #999;
    font-size: 24rpx;
    margin-left: 20rpx;
    font-weight: normal;
}

.Nutrition-top navigator {
    font-size: 28rpx;
    color: rgba(35, 73, 65, 0.5);
}

.Nutrition-main {
    width: 92%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Nutrition-main .Nutrition-left {
    background-color: #f6f6f6;
    border-radius: 16rpx;
    width: 246rpx;
    padding-bottom: 30rpx;
    height: 300rpx;
    box-sizing: border-box;
}

.Nutrition-left1 {
    padding: 20rpx;
    font-size: 28rpx;
    line-height: 40rpx;
}

.Nutrition-left .Nutrition-left2 {
    text-align: center;
}

.Nutrition-left .Nutrition-left2 text {
    display: block;
    font-size: 24rpx;
    color: #999;
}

.Nutrition-left .Nutrition-btn {
    background-color: rgba(0, 153, 119, 0.06);
    color: #009977;
    font-size: 24rpx;
    text-align: center;
    width: 194rpx;
    height: 48rpx;
    line-height: 48rpx;
    margin: 20rpx auto 0;
    border-radius: 24rpx;
}

.Nutrition-right {
    background-color: #f6f6f6;
    border-radius: 16rpx;
    width: 424rpx;
    padding-bottom: 30rpx;
    height: 300rpx;
    box-sizing: border-box;
}

.NutritionRight-item {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    margin-bottom: 36rpx;
}

.NutritionRight-title {
    font-size: 26rpx;
    line-height: 36rpx;
    width: 100rpx;
    color: #666666;
}

.NutritionRight-recent {
    width: calc(100% - 100rpx);
    position: relative;
    font-size: 26rpx;
    color: #999999;
    display: flex;
    align-items: center;
}

.NutritionRight-recent text {
    border-radius: 4rpx;
    display: inline-block;
    height: 28rpx;
}

.recent1 text {
    background-color: #1cacff;
}

.recent2 text {
    background-color: #ffdd59;
}

.recent3 text {
    background-color: #009977;
}

/* 食品详情运动 */
.nutrition_title {
    width: 92%;
    margin: 20rpx auto;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #999;
}

.nutrition_main {
    border-radius: 24rpx 24rpx 0 0;
    background-color: #fff;
    padding: 0 30rpx 30rpx;
    box-sizing: border-box;
}

.nutrition_item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;
    padding: 30rpx 0;
}

.nutrition_item:last-child {
    border-bottom: none;
}

.nutrition_item image {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
}

.nutrition_item_title view:first-child {
    font-size: 28rpx;
    font-weight: 500;
}

.nutrition_item_title view:last-child {
    font-size: 24rpx;
    line-height: 34rpx;
    color: #999;
}

/* 用户故事 */
.story-main {
    width: 92%;
    margin: 0rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.story-item {
    width: 336rpx;
    padding: 0 20rpx 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 24rpx;
    margin-bottom: 20rpx;
}

.story-top {
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    font-size: 28rpx;
}

.story-top image {
    width: 56rpx;
    height: 56rpx;
    margin-right: 20rpx;
}

.story-content {
    font-size: 28rpx;
    margin-bottom: 20rpx;
    height: 80rpx;
    line-height: 40rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.story-img {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.story-img .story-img-item {
    position: relative;
    width: 140rpx;
}

.story-img image {
    width: 140rpx;
    height: 222rpx;
}

.story-img .story-before {
    display: block;
}

.story-img .story-before image {
    width: 70rpx;
    height: 30rpx;
    position: absolute;
    top: 0rpx;
    right: 0;
}

/* 知识详情 */
/* #ifdef MP-WEIXIN */
.storeDetail {
    height: 2580rpx;
}

.story_img {
    margin: 60rpx auto 80rpx !important;
}

/* #endif */
/* #ifndef APP-PLUS */
.storeDetail {
    height: 2492rpx;
}

/* .story_img{margin:160rpx auto 60rpx ;} */
/* #endif */
.storeDetail {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
}

.storeDetail1 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 2508rpx;
}

.story-user {
    width: 100%;
    margin: 23rpx auto 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.story_user {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    padding-left: 30rpx;
    width: 70%;
}

.story_user image {
    width: 64rpx;
    height: 64rpx;
    margin-right: 20rpx;
}

.story_share image {
    width: 138rpx;
    height: 60rpx;
}

.story-title {
    width: 92%;
    margin: 0 auto;
    color: #666;
    font-size: 30rpx;
    line-height: 44rpx;
}

.story-title text {
    color: #009977;
}

.story-ad {
    width: 92%;
    margin: 0 auto;
    height: 290rpx;
    margin-top: 54rpx;
}

.story-ad image {
    width: 100%;
    height: 100%;
}

.story_img {
    width: 92%;
    margin-right: 10rpx;
    display: flex;
    align-items: center;
}

.story_img view {
    border-radius: 24rpx;
    width: 316rpx;
    height: 520rpx;
}

.story_img view:first-child {
    background-image: url(@/static/img/home/before-bg.png);
    background-size: 100% 100%;
    margin-right: 40rpx;
}

.story_img view:last-child {
    background-image: url(@/static/img/home/after-bg.png);
    background-size: 100% 100%;
}

.story_img image {
    width: 316rpx;
    height: 420rpx;
    border-radius: 24rpx;
    margin-top: 70rpx;
}

.story_img image:first-child {
    margin-left: 20rpx;
}

/* .story_img view:last-child{margin-left: 20rpx;} */

/* 模板2 */
.story_img1 {
    width: 92%;
    margin: 68rpx auto 60rpx;
    display: flex;
    align-items: center;
}

.story_img1 .story-img-item {
    position: relative;
}

.story_img1 .story-before {
    position: absolute;
    right: 0;
    top: -20rpx;
    display: inline-block;
    width: 146rpx;
    height: 142rpx;
}

.story_img1 .story-before image {
    width: 146rpx;
    height: 142rpx;
    position: absolute;
    right: 0;
    top: -50rpx;
    border: none;
}

.story_img1 .story-img-item:first-child {
    margin-right: 40rpx;
}

.story_img1 image {
    width: 316rpx;
    height: 420rpx;
    border-radius: 24rpx;
    border: 2px solid #009977;
}

.story-heart {
    background-color: rgba(236, 246, 244, 1);
    position: absolute;
    top: -20rpx;
    width: calc(100% - 20rpx);
    left: 20rpx;
    border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    margin: 0rpx auto;
    border-radius: 24rpx;
    height: 404rpx;
}

.story-heart .heart-top {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx 20rpx;
    box-sizing: border-box;
    justify-content: space-between;
    color: #234941;
}

.story-heart image {
    width: 98rpx;
    height: 46rpx;
}

.heart-content {
    width: 100%;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #4d6b65;
    padding: 0 30rpx 0rpx;
    box-sizing: border-box;
    word-break: break-all;
    overflow-y: scroll;
    height: 280rpx;
    word-wrap: break-word;
}

/* 模板2 */
.story-heart1 {
    background-color: #009675;
    width: 690rpx;
    margin: 0 auto;
    border-radius: 24rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 464rpx;
}

.story-heart1 image {
    width: 98rpx;
    height: 46rpx;
}

.story-heart1 .heart-top {
    height: 100rpx;
}

.heart-content1 {
    width: calc(100% - 20rpx);
    overflow-y: scroll;
    word-break: break-all;
    word-wrap: break-word;
    font-size: 28rpx;
    background-color: #fff;
    height: 354rpx;
    margin: 0 auto;
    line-height: 48rpx;
    color: #666;
    padding: 10rpx 30rpx 0rpx 30rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow-y: auto;
}

.heart-dialogue-content1 {
    background-image: url("@/static/img/home/model-message.png");
    width: calc(85% - 20rpx);
    padding: 36rpx 54rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    color: #666;
    font-size: 26rpx;
    line-height: 36rpx;
    height: 180rpx;
}

/* 模板1 */
.heart-dialogue {
    width: 92%;
    margin: 80rpx auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.heart-dialogue-user {
    width: 15%;
    text-align: center;
}

.heart-dialogue-user image {
    width: 88rpx;
    height: 88rpx;
}

.heart-dialogue-user text {
    font-size: 20rpx;
    line-height: 28rpx;
    color: #5f716c;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.heart-dialogue-content {
    position: relative;
    width: calc(85% - 20rpx);
    background-color: #a3ccc3;
    padding: 30rpx;
    box-sizing: border-box;
    color: #fff;
    font-size: 26rpx;
    border-radius: 24rpx;
    line-height: 36rpx;
}

.heart-dialogue-content::before {
    position: absolute;
    content: "";
    top: 18rpx;
    left: -14rpx;
    border-right: 18rpx solid #a3ccc3;
    border-top: 14rpx solid transparent;
    border-bottom: 14rpx solid transparent;
    width: 0;
    height: 0;
}

.curve {
    width: 92%;
    background-color: #fff;
    border-radius: 24rpx;
    margin: 60rpx auto 60rpx;
    position: relative;
    height: 314rpx;
}

/* 选择模板 */
.modular-top {
    width: 92%;
    margin: 30rpx auto 20rpx;
    font-size: 36rpx;
    line-height: 50rpx;
    font-weight: 500;
}

.modular-main {
    width: 92%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.modular-main .modular-item {
    width: 330rpx;
    background: #ffffff;
    border-radius: 24rpx;
    border: 4rpx solid #fff;
}

.modular-main .modular-item image {
    width: 100%;
    height: 452rpx;
}

.modular-main .modular-item view {
    padding: 22rpx 0;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    box-sizing: border-box;
}

.modular-main .modular-item.on {
    border: 4rpx solid #009977;
}

/* 制作故事 */
.makestory-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 92%;
    margin: 20rpx auto;
}

.makestory-left {
    width: 336rpx;
    height: 292rpx;
    background-color: #fff;
    padding-bottom: 10rpx;
    border-radius: 24rpx;
}

.makestory-left-title {
    padding: 30rpx;
    font-size: 28rpx;
    font-weight: 500;
    line-height: 40rpx;
}

.makestory-left-selent {
    background-color: #f6f6f6;
    border-radius: 16rpx;
    height: 78rpx;
    width: 276rpx;
    margin: 0 auto 30rpx;
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #999;
}

.makestory-left-selent image {
    width: 32rpx;
    height: 32rpx;
    margin: 20rpx;
    box-sizing: border-box;
}

.makestory-left-selent view {
    font-size: 24rpx;
    line-height: 40rpx;
    font-weight: 500;
}

.makestory-upload {
    width: 92%;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 24rpx;
}

.makestory-upload-title {
    padding: 30rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
}

.makestory-upload-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx 30rpx;
}

.makestory-upload-main .makestory-upload-left {
    border-radius: 16rpx;
    background-color: #f6f6f6;
    position: relative;
    width: 306rpx;
    height: 392rpx;
}

.makestory-upload-main .makestory-upload-left text {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
}

.makestory-upload-main .makestory-upload-left text image {
    width: 128rpx;
    height: 48rpx;
}

.makestory-upload-main .makestory-upload-btn {
    background-color: rgba(0, 153, 119, 0.1);
    color: #009977;
    border-radius: 32rpx;
    width: 160rpx;
    height: 64rpx;
    line-height: 64rpx;
    position: absolute;
    bottom: 30rpx;
    left: calc(50% - 80rpx);
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
}

/* 个人信息 */
.userinfo-main {
    border-radius: 24rpx 24rpx 0 0;
    background-color: #fff;
    padding: 10rpx 30rpx;
    margin-top: 20rpx;
    height: calc(100% - 10rpx);
}

.userinfo-main .hy-sr {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 40rpx 0;
    border-bottom: 1px solid #f6f6f6;
}

.userinfo-main .hy-title {
    width: 25%;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666666;
}

.hy-right {
    width: 75%;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    line-height: 40rpx;
}

.hy-right view {
    margin-right: 80rpx;
    display: flex;
    align-items: center;
}

.hy-right image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 12rpx;
}

.hy-right text {
    width: 32rpx;
    height: 32rpx;
    border: 1px solid #ccc;
    display: inline-block;
    margin-right: 12rpx;
    border-radius: 50%;
}

.hy-right1 {
    display: flex;
    align-items: center;
    width: 75%;
    font-size: 28rpx;
    line-height: 40rpx;
}

.hy-right1 input {
    font-size: 28rpx;
    font-weight: 600;
    line-height: 40rpx;
    width: 90%;
}

.hy-bifo {
    color: #ccc;
    font-size: 28rpx;
}

.hy-time {
    color: #ccc;
    font-size: 28rpx;
    line-height: 40rpx;
}

.hy-time image {
    width: 20rpx;
    height: 20rpx;
}

.hy-right1 {
    display: flex;
    align-items: center;
}

.hy-right1 image {
    width: 76rpx;
    height: 76rpx;
}

.hy-right1 input {
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: #333;
}

.right-icon {
    margin-left: 10rpx;
    display: flex;
    align-items: center;
}

.right-icon image {
    width: 32rpx;
    height: 32rpx;
}

/* 排行 */
.ranking-top {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    color: #ff822e;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 24rpx;
    line-height: 34rpx;
}

.ranking-top view {
    line-height: 28rpx;
    text-align: center;
    display: inline-block;
    font-size: 20rpx;
    box-sizing: border-box;
    position: relative;
    width: 28rpx;
    margin-right: 12rpx;
}

.ranking-top view::before {
    content: "";
    position: absolute;
    top: 0;
    width: 28rpx;
    height: 28rpx;
    border: 1px solid #ff822e;
    border-radius: 50%;
    left: 0rpx;
    box-sizing: border-box;
}

.ranking-bang {
    width: 100%;
    position: relative;
    height: 500rpx;
}

.rankBang-item {
    width: 230rpx;
    text-align: center;
}

.item2 {
    position: absolute;
    left: 35%;
    top: 50rpx;
}

.item1 {
    position: absolute;
    left: 7%;
    top: 120rpx;
}

.item3 {
    position: absolute;
    right: 4%;
    top: 160rpx;
    left: auto;
}

.rankBang-name {
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.rankBang-kg {
    font-size: 26rpx;
    color: #009977;
    line-height: 36rpx;
    font-weight: 500;
    padding: 10rpx 0;
}

.item2 .rankBang-autor image {
    width: 96rpx;
    height: 96rpx;
}

.item1 .rankBang-autor image {
    width: 80rpx;
    height: 80rpx;
}

.item3 .rankBang-autor image {
    width: 72rpx;
    height: 72rpx;
}

.rank-main {
    border-radius: 24rpx;
    background-color: #f6f6f6;
    margin-top: -35rpx;
    padding: 30rpx 0;
}

.rank-main .rank-type {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.rank-main .rank-type view {
    background-color: #f6f6f6;
    padding: 10rpx 26rpx;
    font-size: 26rpx;
    border-radius: 24rpx;
    margin-right: 20rpx;
}

.rank-main .rank-type view.on {
    background-color: rgba(0, 153, 119, 0.06);
    color: #009977;
}

.rank-main .rank-type .history {
    background: none;
    margin-right: 0 !important;
}

.rank-main .rank-type .history image {
    width: 10rpx;
    height: 20rpx;
    margin-left: 14rpx;
}

.rank_content {
    padding: 20rpx 0 0;
}

/* border-bottom: 1px solid #; */
.rank_content .rank_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 70rpx 20rpx 40rpx;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
}

.rank_content .rank_item .rank_title {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    /* flex: 1; */
    width: 50%;
}

.rank_content .rank_item .rank_title image {
    min-width: 80rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin: 0 24rpx 0 40rpx;
    object-fit: cover;
    display: block;
}

.rank_name {
    color: #000;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 400;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: normal;
}

.rank_content .rank_item .rank_title .rank-num {
    font-size: 24rpx;
    color: #848494;
    width: 20rpx;
}

.rankRight {
    /* flex: 1; */
    width: 50%;
    font-size: 28rpx;
    left: 40rpx;
    color: #000000;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.rankRight text {
    background-color: rgba(255, 130, 46, 0.06);
    border: 1px solid #ff822e;
    color: #ff822e;
    display: inline-block;
    text-align: center;
    font-size: 24rpx;
    margin-right: 20rpx;
    border-radius: 24rpx;
    width: 128rpx;
    height: 48rpx;
    line-height: 48rpx;
}

.rankRight .rankRightKg {
    text-align: right;
    width: 120rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.rank_content .rank_item.on {
    box-shadow: 0px -1px 0px 0px rgba(38, 43, 49, 0.06);
}

.rank_content .rank_item.active {
    background: #f2f7f6;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20rpx 70rpx env(safe-area-inset-bottom) 40rpx;
    box-sizing: border-box;
}

.rank_content .rank_item.active .rank-num,
.rank_content .rank_item.active .rankRight {
    color: #009977;
}

.rank_content .rank_item.on .rank-num,
.rank_content .rank_item.on .rankRight {
    color: #009977;
}

/* 弹出层 */
/* .popup-main{z-index: 127;position: relative;width:530rpx;height: 426rpx; background: url(@/static/img/homeuserdata/user_data_girl.png)
 0px 0px no-repeat; background-size:530rpx 426rpx;border-radius: 24rpx;}
 .popup-title{padding:68rpx 32rpx 0;font-size: 40rpx;font-weight: 500;color: #234941;margin-bottom: 28rpx;}
.popup-main  .popup-title1{font-size: 28rpx;font-weight: 400;padding: 0 0 0 32rpx ;}
.popup-main  .popup-title1 text{color: #FF822E;}
.popup-btn{width: 430rpx;height: 88rpx;line-height: 88rpx;background: linear-gradient(180deg, #46C09E 0%, #156D4F 100%);border-radius: 24rpx;margin-top: 60rpx;font-size: 30rpx;color: #fff; box-shadow: 0px 12px 24px 0px rgba(55,168,148,0.2000)}
.popup-main .box_4 { z-index: 128;  position: absolute; left: 322rpx;top: -128rpx; width: 318rpx;height: 298rpx; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2978fff6ae59726e7408a9a7cd5688b8189cfd9abb22fdd1d6f8e2544a649c7c)0px 0px no-repeat;background-size:318rpx 298rpx;}

.popup-main1{z-index: 127;position: relative;width:530rpx;height: 476rpx; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng802c2b10b8c2653cc41f5e6b2bba1c20249d1d4db75714b05c3743300ed02147)
 0px 0px no-repeat; background-size:530rpx 476rpx;border-radius: 24rpx;}
 */
/* 历史排行榜 */
.historyRanking {
    width: 100%;
}

.historyRanking-top {
    width: 100%;
    margin: 0rpx auto;
    display: flex;
    align-items: center;
    padding: 0 4%;
}

.historyRanking-top .selent {
    display: flex;
    align-items: center;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 44rpx;
}

.historyRanking-top .selent image {
    width: 16rpx;
    height: 10rpx;
    margin-left: 10rpx;
}

.historyRanking-top .selent-title {
    color: #234941;
    font-size: 32rpx;
    display: flex;
    align-items: center;
}

.historyRanking-main {
    height: calc(100% - 50rpx);
    border-radius: 24rpx 24rpx 0 0;
    background-color: #fff;
}

/* 商城 */
.mall_search {
    width: 100%;
    z-index: 10;
    padding: 0 0 30rpx;
    box-sizing: border-box;
    margin: 0 auto;
    background-color: #fff;
}

.mall_search input {
    font-size: 28rpx;
    color: #2d3130;
    width: 92%;
    height: 88rpx;
    line-height: 88rpx;
    margin: 0rpx auto;
    padding-left: 70rpx;
    box-sizing: border-box;
    border-radius: 24rpx;
    background: url('https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/search.png') #f3f7f6 no-repeat;
    background-size: 40rpx;
    background-position: 3% 50%;
}

.mall-type {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 72rpx;
    border-bottom: 1px solid #e6e6e6;
}

.mall-type view {
    width: 25%;
    text-align: center;
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
}

.mall-type view.on {
    color: #009977;
    font-weight: 500;
}

.mall-type .menuItem image {
    width: 32rpx;
    height: 32rpx;
}

.list-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-img .img {
    width: 16rpx;
    height: 8rpx;
}

.wares-card-container {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx auto;
    padding: 0 20rpx;
    justify-content: space-between;
}

.wares-card-container navigator {
    width: calc(50% - 12rpx);
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}

.wares-card-container navigator:nth-child(2n + 2) {
    margin-right: 0rpx;
}

.wares-card-container .goods {
    width: 100%;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding-bottom: 20rpx;
}

.wares-card-container .img {
    width: 100%;
    height: 346rpx;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.wares-card-container .good-info {
    margin: 20rpx 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 400;
    font-size: 28rpx;
    height: 85rpx;
    line-height: 40rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}

.wares-card-container .price {
    display: flex;
    justify-content: space-between;
    color: #fc5252;
    font-size: 36rpx;
    box-sizing: border-box;
    padding: 0 20rpx;
}

/* 分类 */
.main-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.sub-nav {
    width: 180rpx;
    height: 100vh;
    background: #f6f6f6;
}

.sub-nav .menu {
    text-align: center;
    color: #333;
    font-size: 26rpx;
    height: 112rpx;
    line-height: 112rpx;
    font-weight: 400;
}

.sub-nav .active {
    font-weight: 500;
    background-color: #fff;
    font-size: 28rpx;
    width: 180rpx;
    display: inline-block;
    height: 112rpx;
    line-height: 112rpx;
    position: relative;
}

.sub-nav .active::before {
    background: #009977;
    content: " ";
    border-radius: 0px 100px 100px 0px;
    height: 28rpx;
    position: absolute;
    top: calc(50% - 14rpx);
    left: 0rpx;
    width: 8rpx;
}

.Classify-list {
    width: calc(100% - 180rpx);
    height: 100vh;
    background-color: #fff;
}

.Classify_main1 {
    width: 100%;
    margin: 0 auto 10rpx;
    padding: 0 40rpx;
    box-sizing: border-box;
}

.Classify-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.Classify-content .Classify-item {
    width: 136rpx;
    text-align: center;
    margin: 0 40rpx 40rpx 0;
    box-sizing: border-box;
}

.Classify-content .Classify-item .img {
    width: 100%;
    height: 136rpx;
    margin: 0 auto 20rpx;
    box-sizing: border-box;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

.Classify-content .Classify-item .name {
    color: #666666;
    text-align: center;
    font-size: 24rpx;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.Classify-title {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    padding: 40rpx 0 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.Classify-content .Classify-item:nth-child(3n) {
    margin: 0 0 40rpx 0;
}

/* 商品详情 */

.productlist .banner {
    width: 100%;
    height: 750rpx;
    background: #fff;
    box-sizing: border-box;
    position: relative;
}

.productlist .banner swiper {
    height: 100%;
}

.productlist .banner swiper-item {
    width: 100%;
    height: 750rpx;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.productlist .item-num {
    z-index: 9;
    position: absolute;
    bottom: 30rpx;
    right: 0rpx;
    border-radius: 24rpx 0px 0px 24rpx;
    background: rgba(0, 0, 0, 0.5);
    height: 48rpx;
    line-height: 48rpx;
    color: #fff;
    font-weight: 500;
    font-size: 32rpx;
    width: 114rpx;
    text-align: center;
}

.productlist .intro {
    width: 100%;
    background-color: #fff;
}

.productlist .intro image {
    width: 100%;
    height: 1000rpx;
}

.youh {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    padding: 0 30rpx 30rpx;
    box-sizing: border-box;
}

.youh .youh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 24rpx;
    padding-top: 30rpx;
}

.youh .title-p1 {
    font-size: 48rpx;
    font-weight: 500;
    color: #ff413b;
}

.youh .youh-top .youh-num {
    color: #999999;
    font-weight: 400;
    font-size: 24rpx;
}

.youh .youh-title {
    font-size: 32rpx;
    line-height: 44rpx;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    max-height: 90rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.DetailBottom {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx 40rpx 20rpx 30rpx;
    z-index: 10;
    background: #fff;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    box-shadow: 0px -1px 0px 0px rgba(38, 43, 49, 0.06);
    border-radius: 40rpx 40rpx 0 0;
}

.DetailBottom .li {
    width: 48rpx;
    text-align: center;
    margin-right: 80rpx;
}

.DetailBottom .li image {
    display: block;
    height: 48rpx;
    width: 48rpx;
    margin: 0 auto;
}

.DetailBottom .li .p {
    text-align: center;
    font-size: 20rpx;
    color: #666;
}

.DetailBottom .right {
    text-align: center;
    width: 552rpx;
    font-size: 30rpx;
    border-radius: 24rpx;
    color: #fff;
    font-weight: 600;
    height: 96rpx;
    line-height: 96rpx;
    background: linear-gradient(180deg, #46c09e 0%, #156d4f 100%);
    text-align: center;
    box-shadow: 0px 12px 24px 0px rgba(55, 168, 148, 0.2);
}

/* 订单 */
.address {
    width: 100%;
    margin: 20rpx 0;
}

.address-main {
    width: 100%;
    padding: 30rpx 30rpx;
    margin: 0 auto;
    border-radius: 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: space-between;
}

.address-main .address-left image {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
}

.address-main .address-left {
    font-size: 28rpx;
    color: #333;
    font-weight: 400;
    line-height: 40rpx;
    display: flex;
    align-items: center;
}

.address-main .address-right image {
    width: 30rpx;
    height: 30rpx;
}

.address-main .address-name {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 600;
}

.address-main .address-name text {
    margin-left: 20rpx;
}

.address-main .address_title {
    color: #666;
    font-size: 24rpx;
    line-height: 34rpx;
    margin-top: 10rpx;
    font-weight: 300;
}

.order-main {
    width: 100%;
    border-radius: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
}

.order-main .order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-main .order-item .order-icon {
    width: 180rpx;
    height: 180rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.order-main .order-item .order-title {
    width: calc(100% - 210rpx);
}

.order-main .order-item .order-title .orderTitle {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 80rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.order-main .order-item .order-title .order-tag {
    font-size: 24rpx;
    line-height: 24rpx;
    font-weight: 400;
    color: #999;
    margin-bottom: 30rpx;
}

.order-main .order-item .order-title .order-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-main .order-item .order-title .order-price view:first-child {
    line-height: 36rpx;
    font-size: 26rpx;
    color: #282828;
    font-weight: 400;
}

.order-main .order-item .order-title .order-price view:last-child {
    color: #999;
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
}

.order-main .order-item1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
}

.order-main .order-item1 view:first-child {
    color: #666;
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
}

.order-main .order-item1 view:last-child {
    color: #282828;
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.order-main .order-item1 view:last-child image {
    width: 30rpx;
    height: 30rpx;
    margin-left: 14rpx;
}

.order-bottom {
    border-top: 1px solid #e6e6e6;
    margin-top: 30rpx;
    padding-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-bottom view:first-child {
    color: #333;
    line-height: 36rpx;
    font-size: 26rpx;
    font-weight: 400;
}

.order-bottom input {
    width: 100%;
    border: none;
    text-align: right;
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
    color: #282828;
}

/* 选择收货地址 */
.addresslist {
    width: 92%;
    margin: 20rpx auto;
}

.address-item {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;
}

.address-item .address-name {
    font-size: 28rpx;
    color: #333;
    line-height: 40rpx;
    font-weight: 500;
}

.address-item .address-name text {
    padding: 0 8rpx;
}

.address-item .address-phone {
    color: #666;
    font-weight: 500;
}

.address-item .address-bifo {
    padding: 16rpx 0 30rpx;
    color: #666666;
    font-size: 24rpx;
    line-height: 34rpx;
    border-bottom: 1px solid #e6e6e6;
}

.address-item .address-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20rpx;
}

.address-item .mo {
    font-size: 26rpx;
    color: #ff822e;
    line-height: 36rpx;
    font-weight: 500;
}

.address-item .address-right {
    display: flex;
    align-items: center;
}

.address-item .address-right view {
    font-size: 26rpx;
    color: #565656;
    line-height: 36rpx;
    display: flex;
    align-items: center;
}

.address-item .address-right image {
    width: 32rpx;
    height: 32rpx;
    margin-right: 4rpx;
}

.address-item .address-right view:first-child {
    margin-right: 40rpx;
}

/* 添加地址 */
.addAddress {
    margin-top: 20rpx;
    width: 100%;
}

.addAddress .addAddress-main {
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    box-sizing: border-box;
}

.addAddress .addAddress-main .add-item {
    padding: 40rpx 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #e6e6e6;
}

.addAddress-main .add-item .add-name {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333;
    font-weight: 400;
}

.addAddress-main .add-item .add-right {
    text-align: right;
    line-height: 40rpx;
    font-weight: 400;
    width: 80%;
}

.addAddress-main .add-item .add-right .city {
    color: #999;
    font-size: 28rpx;
}

.addAddress-main .add-item .add-right image {
    width: 20rpx;
    height: 20rpx;
}

.addAddress-main .add-item .add-right input,
.add-bifo input {
    font-size: 28rpx;
    color: #666;
}

.add-item .add-bifo {
    margin-top: 30rpx;
    color: #999;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 400;
}

.addAddress .addAddress-main .add-item:last-child {
    border-bottom: none;
}

/* 支付完成 */

.complete {
    margin-top: 160rpx;
}

.completeImg {
    width: 100%;
    text-align: center;
}

.completeImg image {
    width: 128rpx;
    height: 128rpx;
    margin: 0 auto;
}

.completeImg_text {
    width: 100%;
    text-align: center;
    margin-top: 60rpx;
}

.completeImg text {
    text-align: center;
    color: #333;
    font-weight: 400;
    font-size: 32rpx;
    line-height: 40rpx;
}

.completeImg .textO,
.completeImg .textT {
    color: #999;
    font-size: 26rpx;
    padding: 0 10rpx;
}

.completeBut {
    display: flex;
    flex-wrap: nowrap;
    padding: 120rpx 96rpx;
    width: 100%;
    box-sizing: border-box;
}

.completeBut button {
    width: 264rpx;
    color: #fff;
    font-size: 28rpx;
    height: 76rpx;
    border-radius: 20rpx;
    line-height: 76rpx;
}

.completeBut button:first-child {
    margin-right: 30rpx;
    background: #ccc;
}

.completeBut button:last-child {
    margin-left: 15px;
    background: #0f882d;
}

/* 我的 */
.me-bg {
    width: 100%;
    background-color: #f7fdfc;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 920rpx;
}

.me-top {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
}

.me-top .me-icon {
    border-radius: 50%;
    text-align: center;
    width: 134rpx;
    height: 134rpx;
    box-shadow: 4rpx 4rpx 48rpx rgba(0, 0, 0, 0.3);
    line-height: 134rpx;
}

.me-top .me-icon .me-icon_image {
    width: 124rpx;
    height: 124rpx;
    border-radius: 50%;
    margin: 5rpx auto;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.me-top .me-title {
    margin-left: 36rpx;
}

.me-top .me-title .me-name {
    font-size: 48rpx;
    line-height: 66rpx;
    color: #333333;
    font-weight: 500;
}

.me-top .me-title .me-grade {
    background: #ff822e;
    box-shadow: 0px 6rpx 12rpx 0px #d9d9d9;
    border-radius: 6rpx 12rpx 5rpx 12rpx;
    border: 1px solid #ffffff;
    color: #fff;
    width: 104rpx;
    height: 40rpx;
    font-size: 20rpx;
    text-align: center;
    line-height: 40rpx;
}

.me-look {
    width: 89%;
    padding: 0 30rpx;
    box-sizing: border-box;
    margin: 48rpx auto 0;
    height: 132rpx;
    background: linear-gradient(302deg, #187254 0%, #39a585 100%);
    border-radius: 24rpx;
    border: 1px solid rgba(255, 255, 255, 0.34);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.melook-left {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 24rpx;
}

.melook-left text {
    font-size: 52rpx;
    padding: 0 8rpx;
    color: #fff;
}

.melook-left image {
    width: 44rpx;
    height: 44rpx;
}

.melook-right image {
    display: block;
    width: 138rpx;
    height: 56rpx;
}

.me-main {
    margin: 30rpx 40rpx 0;
    flex-wrap: wrap;
    background-color: #fff;
    border-radius: 24rpx;
    padding: 30rpx 0rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.me-item {
    width: 25%;
    text-align: center;
    margin-bottom: 30rpx;
}

.me-item image {
    width: 64rpx;
    height: 64rpx;
}

.me-item text {
    display: block;
    font-size: 22rpx;
    line-height: 32rpx;
}

.me-main1 {
    width: 89%;
    padding: 0 30rpx;
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 24rpx;
    margin: -60rpx auto;
}

.me-main1 .me-item1 {
    padding: 30rpx 0 30rpx;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
}

.me-main1 .me-item1 image {
    width: 64rpx;
    height: 64rpx;
    margin-right: 20rpx;
}

.me-main1 .me-item1 text {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 400;
}

.me-main1 .me-item1:last-child {
    border-bottom: none;
}

/* 我的积分 */
.integral-num {
    padding: 140rpx 50rpx 26rpx;
}

.integral-title {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #666;
    font-weight: 400;
}

.integral-count {
    font-size: 72rpx;
    line-height: 86rpx;
    color: #009977;
    font-weight: bold;
    padding-top: 26rpx;
}

.integral-main {
    border-radius: 32rpx 32rpx 0 0;
    background-color: #fff;
    height: calc(100% - 410rpx);
}

.integral-main-top {
    margin-top: -80rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
}

.integral-main-top .integral-main-top-item {
    text-align: center;
    width: 50%;
    position: relative;
    padding-bottom: 20rpx;
    color: #999;
}

.integral-main-top .integral-main-top-item.on text {
    width: 32rpx;
    height: 6rpx;
    position: absolute;
    bottom: 0;
    left: calc(50% - 16rpx);
    color: #333;
    font-size: 30rpx;
    line-height: 42rpx;
    height: 6rpx;
    background: linear-gradient(296deg, #36a782 0%, #56ccab 100%);
    box-shadow: 0px 2px 8px 0px rgba(57, 171, 134, 0.5);
    border-radius: 6rpx;
}

.integral-main-top .integral-main-top-item.on {
    color: #333;
}

.integral-main-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 92%;
    margin: 0 auto;
    padding: 30rpx 0;
    border-bottom: 1px solid #f6f6f6;
}

.integral-main-item .integral-main-left {
    width: 80%;
}

.integral-main-item .integral-main-left view:first-child {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
}

.integral-main-item .integral-main-left view:last-child {
    font-size: 24rpx;
    line-height: 34rpx;
    font-weight: 400;
    margin-top: 8rpx;
    color: #999;
}

.integral-main-item .integral-main-right image {
    width: 32rpx;
    height: 32rpx;
}

.integral-main-item .integral-main-right {
    font-size: 36rpx;
    font-weight: bold;
    line-height: 44rpx;
    color: #333;
}

.integral-main-right1 {
    font-size: 24rpx;
    color: #666;
    font-weight: normal;
    padding: 5rpx 0;
}

.integral-main-item:last-child {
    border-bottom: none;
}

.integral-main-left_title {
    font-size: 28rpx;
    font-weight: 500;
}

.homepage-main {
    margin-top: -350rpx;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
}

.homepage-user {
    display: flex;
    align-items: center;
    width: 92%;
    margin: 0 auto;
    padding: 30rpx 0;
}

.homepage-user .homepage-user-icon {
    width: 128rpx;
    margin-top: -60rpx;
    border-radius: 50%;
    height: 128rpx;
}

.homepage-user .homepage-user-icon image {
    width: 128rpx;
    height: 128rpx;
    border: 1rpx #fff solid;
}

.homepage-user-num {
    width: calc(100% - 128rpx);
    display: flex;
    align-items: center;
}

.homepage-user-num .homepage-user-item {
    width: 33%;
    text-align: center;
}

.homepage-user-num .homepage-user-item .user-num {
    color: #333;
    line-height: 60rpx;
    font-size: 48rpx;
    font-weight: bold;
}

.homepage-user-num .homepage-user-item text {
    color: #999;
    font-size: 22rpx;
    line-height: 32rpx;
    font-weight: 400;
}

.homepage-name {
    width: 92%;
    margin: 32rpx auto 0;
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    justify-content: space-between;
}

.homepage-name1 {
    font-size: 36rpx;
    font-weight: 500;
    width: 70%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.homepage-btn {
    width: 112rpx;
    height: 48rpx;
    border-radius: 52rpx;
    border: 1px solid #999;
    text-align: center;
    color: #999;
    font-size: 24rpx;
    line-height: 48rpx;
}

.homepage-right image {
    width: 92rpx;
    height: 60rpx;
}

.homepage-main1 {
    width: 100%;
    margin: 0 auto;
    padding: 30rpx 0 10rpx 30rpx;
    box-sizing: border-box;
}

/* 订单列表 */
.orderlist-type {
    display: flex;
    align-items: center;
    width: 92%;
    margin: 0 auto;
}

.orderlist-type-item {
    width: 20%;
    text-align: center;
}

.scroll-view_H {
    white-space: nowrap;
    width: 100%;
    padding: 30rpx 0;
}

.scroll-view-item_H {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    width: 20%;
    font-size: 28rpx;
    color: #999;
    line-height: 40rpx;
}

.scroll-view-item_H.active {
    color: #009977;
    font-weight: 500;
}

.orderlist-main {
    width: 100%;
}

.orderlist-item {
    width: 92%;
    margin: 0 auto;
    border-radius: 24rpx;
    padding: 30rpx;
    background-color: #fff;
    box-sizing: border-box;
    margin-bottom: 20rpx;
}

.orderlist-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
}

.orderlist-top view:first-child {
    color: #666;
    font-size: 24rpx;
    font-weight: 400;
}

.orderlist-top view:last-child {
    font-size: 24rpx;
    font-weight: 400;
}

.orderlist-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.orderlist-content .orderlist-icon image {
    width: 180rpx;
    height: 180rpx;
    border-radius: 24rpx;
}

.orderlist-content .orderlist-right {
    width: calc(100% - 210rpx);
}

.orderlist-content .orderlist-right .orderlist-right-title {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 80rpx;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.orderlist-content .orderlist-right .orderlist-right-tag {
    font-size: 24rpx;
    color: #999;
    line-height: 24rpx;
    margin-top: 10rpx;
}

.orderlist-content .orderlist-right-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
}

.orderlist-content .orderlist-right-price view:first-child {
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
    color: #282828;
}

.orderlist-content .orderlist-right-price view:last-child {
    font-size: 26rpx;
    line-height: 36rpx;
    font-weight: 400;
    color: #999;
}

.orderlist-bottom {
    display: flex;
    justify-content: flex-end;
    font-size: 24rpx;
    color: #666;
    line-height: 34rpx;
    align-items: center;
    margin: 40rpx 0 34rpx;
}

.orderlist-bottom text {
    font-size: 36rpx;
    color: #333;
    line-height: 50rpx;
    font-weight: 500;
}

.orderlist-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.orderlist-btn view {
    width: 136rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    border-radius: 28rpx;
    font-size: 24rpx;
}

.orderlist-btn .btn1 {
    border: 1px solid #ff822e;
    color: #ff822e;
}

.orderlist-btn .btn2 {
    border: 1px solid #ccc;
    color: #666;
}

.orderDetail .time {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 60rpx);
    margin: 30rpx 30rpx 0rpx 30rpx;
}

.orderDetail .time image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 16rpx;
}

.orderDetail .time1 {
    font-weight: 600;
    font-size: 30rpx;
    line-height: 42rpx;
    display: flex;
    align-items: center;
    color: #fff;
}

.timedate {
    font-size: 28rpx;
    line-height: 40rpx;
    color: #d9f0e9;
    font-weight: 400;
}

.orderDetail-type {
    width: 100%;
    border-radius: 24rpx;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 20rpx;
}

.orderDetail-type_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 30rpx;
}

.orderDetail-type_item view:last-child {
    font-size: 26rpx;
    color: #282828;
    line-height: 36rpx;
    font-weight: 500;
}

.orderDetail-type_item view:first-child {
    font-size: 26rpx;
    color: #282828;
    line-height: 36rpx;
    font-weight: 400;
}

.orderDetail-type_item text {
    border-radius: 16rpx;
    background-color: #e6e6e6;
    color: #333;
    width: 66rpx;
    height: 32rpx;
    line-height: 32rpx;
    text-align: center;
    margin-left: 10rpx;
    font-size: 20rpx;
    display: inline-block;
}

.orderDetail-type_item:last-child {
    padding: 0 0 0 !important;
}

/* 等级 */
.gradeone {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    background: #dfede9;
    padding: 0rpx 0 50rpx 0;
    height: 100%;
}

.gradeone_main {
    position: relative;
    margin-bottom: 54rpx;
}

.gradeone_main::before {
    content: "";
    position: absolute;
    background-image: url(@/static/img/home/current.png);
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0;
    right: 0;
    z-index: 999;
    width: 140rpx;
    height: 80rpx;
}

.gradine_bner_img {
    height: 243rpx;
}

.gradine_bner_img image {
    height: 100%;
}

.gradine_bner {
    position: relative;
    width: 100%;
}

.gradine_bner_main {
    position: absolute;
    top: 0;
    width: calc(90% - 25rpx);
    padding: 30rpx;
    box-sizing: border-box;
    height: 100%;
    margin-left: 30rpx;
}

.gradeName {
    color: #fff;
    font-size: 36rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: 100%;
    line-height: 50rpx;
    font-weight: 500;
    text-shadow: 0px 1px 2px rgba(0, 99, 78, 0.1);
}

.gradeSpeed {
    margin: 70rpx 0 20rpx;
}

.gradeNum {
    color: #fff;
    font-size: 24rpx;
    display: block;
}

.bg-color1 {
    width: 190rpx;
    height: 222rpx;
    background-color: #ff934a;
    opacity: 0.2;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(22px);
}

.bg-color2 {
    width: 160rpx;
    height: 424rpx;
    background-color: #29b998;
    opacity: 0.3;
    position: absolute;
    bottom: 0;
    right: 0;
    filter: blur(50px);
}

.banner {
    width: 100%;
}

.banner .image-container {
    width: 100%;
    height: 320rpx;
}

.gradeDetil-main {
    height: calc(100% - 200rpx);
    background-color: #fff;
    border-radius: 40rpx 40rpx 0 0;
    padding-bottom: 30rpx;
}

.gradeDetil-main_top {
    padding: 40rpx 40rpx 0 40rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 500;
    margin-bottom: 20rpx;
}

.gradeDetil-main_item {
    font-size: 28rpx;
    line-height: 40rpx;
    font-weight: 400;
    padding: 10rpx 40rpx 0;
}

.gradeDetil-main_content {
    padding: 0 0rpx;
    box-sizing: border-box;
}

.huati_tag_title {
    display: flex;
    align-items: center;
    width: 100%;
}

.dynamic-more {
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    color: #009977;
    font-size: 28rpx;
    margin-left: 54rpx;
}

.dynamic-more image {
    width: 16rpx;
    height: 32rpx;
    margin-left: 10rpx;
}

.spacingIphone {
    height: env(safe-area-inset-bottom);
}
